<template>
    <JsonEditorVue 
        ref="jsonEditorRef" 
        class="editor" 
        v-model="json" 
        :current-mode="props.mode" 
        language="zh" 
        :style="props.style" 
        :options="options"
    />
</template>
<script setup lang="ts">
    import { ref, reactive, watchEffect, onMounted } from 'vue'
    import JsonEditorVue from 'json-editor-vue3'

    const props = defineProps({
		json: {
			type: Object,
			required: true
		},
        mode: {
            type: String,
            default: 'tree'
        },
        style: {
            type: String,
            default: 'height: 423px'
        },
        expand: {
            type: Array,
            default: []
        }
	})
    /**
     * json编辑器引用
     */
    const jsonEditorRef = ref(null)
    const json = ref()
    const options = reactive({
        modes: ['code','form']
    })

    onMounted(()=> {
        /**
         * JSON编辑器加载完JSON后折叠指定层级
         */
        setTimeout(() => {
            props.expand.forEach(element => {
                jsonEditorRef.value.editor.expand({
                    path: element,
                    isExpand: false,
                    recursive: true
                })
            });
        }, 500);
    })

    /**
     * 1.watch: 既要指明监视的属性，也要指明监视的回调。
     * 2.watchEffect: 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
     */
    watchEffect(() => {
        json.value = props.json
    })

    /**
     * 获取绑定的json
     */
    const getJson = () => {
        return json.value
    }

    // 暴露方法和属性
	defineExpose({
		getJson
	})

</script>
<style scoped></style>